import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    this.state = {
      count: 0,
      msg: 'heiheihei ',
    }
  }
  render() {
    return (
      <div>
        <p id="count">{this.state.count}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            // 1. 多次连续调用setState,会合并成一次. 如果有相同属性,下面会覆盖上面的
            // this.setState({
            //   count: this.state.count + 1,
            //   msg: '哈哈',
            // })
            // this.setState({
            //   count: this.state.count + 2,
            // })
            // this.setState({
            //   count: this.state.count + 3,
            // })
            //2. setState的第二个参数
            // this.setState(
            //   {
            //     count: this.state.count + 1,
            //   },
            //   () => {
            //     //当数据修改完毕并且页面更新完毕之后,触发这个函数
            //     console.log(this.state.count)
            //     console.log(document.getElementById('count'))
            //   }
            // )
            //3. setState的第一个参数,既可以写成对象,也可以写成回调函数.如果写成回调函数,则当上一次的state数据修改完毕,这个回调才会执行,并且可以在形参接受到最新的state数据
            // this.setState((state) => {
            //   return {
            //     count: state.count + 1,
            //   }
            // })
            // this.setState((state) => {
            //   return {
            //     count: state.count + 2,
            //   }
            // })
            // this.setState((state) => {
            //   return {
            //     count: state.count + 3,
            //   }
            // })
          }}
        >
          计数+
        </button>
      </div>
    )
  }
}
/*
react.js 

class Component {
    ...忽略
}

React.Component = Component 

export {Component}
export default React



*/
